<template>
  <div class="xiang">
    <div class="xiangs">
      <h1 @click="fanhui">《 返回</h1>
      <h1 class="xinxi">客户信息：</h1>
      <ul class="qing">
        <li>
          <h1>姓名：</h1>
          <p>{{obj.name}}</p>
        </li>
        <li>
          <h1>手机号：</h1>
          <p>{{obj.user}}</p>
        </li>
        <li>
          <h1>用户等级：</h1>
          <p>{{obj.dengji}}</p>
        </li>
        <li>
          <h1>用户积分：</h1>
          <p>{{obj.jifen}}</p>
        </li>
        <li>
          <h1>标签：</h1>
          <p>{{obj.biaoqian}}</p>
        </li>
        <li>
          <h1>邮箱：</h1>
          <p>{{obj.email}}</p>
        </li>
        <li>
          <button @click="jiaru" v-if="this.obj.biaoqian==='-'">加入黑名单</button>
          <button @click="yichu" v-if="this.obj.biaoqian==='黑名单'">移除黑名单</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import request from "../../../request/index";
export default {
  name: "Xiang",
  data() {
    return {
      obj: {}
    };
  },
  methods: {
    fanhui() {
      this.$router.push({ path: "/client" });
    },
    jiaru() {
      this.$confirm("确定要将本用户加入黑名单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            url: "/froms/jiaru",
            method: "GET",
            params: { id: this.obj.id }
          }).then(res => {
            if (res === 1) {
              window.location.reload();
            }
          });
        })
        .catch(() => {});
    },
    yichu() {
      this.$confirm("确定要将本用户移除黑名单吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          request({
            url: "/froms/yichu",
            method: "GET",
            params: { id: this.obj.id }
          }).then(res => {
            if (res === 1) {
              window.location.reload();
            }
          });
        })
        .catch(() => {});
    },
    shuju(id) {
      request({
        url: "/froms/qing",
        method: "GET",
        params: { id: id }
      }).then(res => {
        this.obj = res;
      });
    }
  },
  mounted() {
    let id = this.$route.params.id;
    this.shuju(id);
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.xiang {
  width: 100%;
  height: 100%;
  background: rgb(238, 241, 245);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.xiangs {
  width: 92%;
  height: 92%;
}
.xiangs > h1 {
  font-size: 15px;
  font-weight: 400;
  line-height: 50px;
}
.xiangs > .xinxi {
  font-weight: 600;
}
.qing {
  width: 50%;
  height: calc(100% - 100px);
}
.qing li {
  display: flex;
  align-items: center;
}
.qing li h1 {
  font-size: 15px;
  font-weight: 400;
  line-height: 50px;
}
.qing li p {
  font-size: 15px;
  line-height: 50px;
}
.qing li button {
  border: none;
  outline: none;
  width: 150px;
  height: 40px;
  border-radius: 5px;
  margin-top: 30px;
  background: rgb(96, 177, 253);
}
</style>